<template>
    <div id="login">
        <transition>
            <div class="login-box animate__animated animate__bounceInDown">
                <div class="login-title">
                    <span>用户登录</span>
                </div>
                <div class="login-form">
                    <div class="login-input">
                        <input type="text" placeholder="账号(ID)" @keyup.enter="login" v-model="userinfo.user_name" />
                        <img src="@/assets/login/login-id.png" />
                    </div>
                    <div class="login-input">
                        <input type="password" placeholder="密码" @keyup.enter="login" v-model="userinfo.password" />
                        <img src="@/assets/login/login-pwd.png" />
                    </div>
                    <div class="valid-code" v-if="!env">
                        <input type="text" ref="inputCode" @keyup.enter="login" v-model="inputCode" placeholder="请输入验证码" clearable />
                        <div style="transform: scale(0.8); margin-top: 4px" @click="createCode" id="spancode">
                            <valid-code :identifyCode="code"></valid-code>
                        </div>
                    </div>
                    <div class="login-button">
                        <button @click="login">登录</button>
                    </div>
                    <div class="login-check">
                        <el-checkbox v-model="save">保存账号</el-checkbox>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
import { loginApi } from '@/requset/api'
import { mapMutations } from 'vuex'
import validCode from '@/components/validCode'
import { aes_encrypt } from '@/plugins/crypto.js'
export default {
    data() {
        return {
            userinfo: {
                user_name: '',
                password: '',
            },
            save: true,
            code: '',
            inputCode: '',
        }
    },
    components: {
        validCode,
    },
    methods: {
        ...mapMutations('userinfo', ['setToken']),
        createCode() {
            let text = ''
            let possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
            // 设置验证码长度，
            for (let i = 0; i < 4; i++) {
                text += possible.charAt(Math.floor(Math.random() * possible.length))
            }
            this.code = text
        },
        login() {
            if (this.inputCode == '') {
                if (!this.env) {
                    this.$message.error('请输入验证码')
                    return
                }
            }
            if (this.inputCode.toLowerCase() != this.code.toLowerCase()) {
                if (!this.env) {
                    this.$message.error('验证码错误')
                    this.inputCode = ''
                    this.createCode()
                    return
                }
            }
            loginApi({
                user_name: this.userinfo.user_name,
                password: aes_encrypt(this.userinfo.password),
            }).then((res) => {
                if (res.data.code == 0) {
                    // this.$message({
                    //     message: '登录成功!',
                    //     type: 'success',
                    // })
                    if (this.save) {
                        localStorage.setItem('userinfo', JSON.stringify(this.userinfo))
                    } else {
                        localStorage.removeItem('userinfo')
                    }
                    this.setToken(res.data.login_token)
                    localStorage.setItem('token', res.data.login_token)
                    if (localStorage.getItem('topath')) {
                        this.$router.push(localStorage.getItem('topath'))
                        localStorage.removeItem('topath')
                    } else this.$router.push('/index/home')
                } else {
                    this.$message.error(res.data.msg)
                }
            })
        },
    },
    computed: {
        env() {
            return process.env.NODE_ENV !== 'production'
        },
    },
    created() {
        let obj = this.$route.query
        if (obj.page) {
            this.$router.push(obj.page)
        }
        if (obj.user_name || obj.token) {
            obj.password = aes_encrypt(obj.password)
            obj.access_token = decodeURIComponent(obj.token)
            loginApi(obj).then((res) => {
                if (res.data.code == 0) {
                    // this.$message({
                    //     message: '登录成功!',
                    //     type: 'success',
                    // })
                    this.setToken(res.data.login_token)
                    localStorage.setItem('token', res.data.login_token)
                    if (localStorage.getItem('topath')) {
                        this.$router.push(localStorage.getItem('topath'))
                        localStorage.removeItem('topath')
                    } else this.$router.push('/index/home')
                } else {
                    this.$message.error(res.data.msg)
                }
            })
        }
        let userinfo = localStorage.getItem('userinfo')
        if (userinfo !== null) {
            this.userinfo = JSON.parse(userinfo)
        }
    },
    mounted() {
        this.createCode()
    },
}
</script>

<style lang="less" scoped>
#login {
    width: 100%;
    height: 100%;
    background-image: url(@/assets/login/login-bg.png);
    background-size: cover;
    position: relative;
    overflow: auto;

    .login-box {
        width: 446px;
        height: 360px;
        background-image: url(@/assets/login/login-form.png);
        background-size: cover;
        position: absolute;
        top: 226px;
        right: 140px;

        .login-title {
            position: absolute;
            color: #fff;
            font-weight: 600;
            top: 26px;
            left: 48px;
        }

        .login-form {
            margin: 30px auto;
            margin-top: 90px;
            width: 60%;
            height: 240px;
            display: flex;
            flex-direction: column;
            align-items: center;

            .login-input {
                width: 250px;
                height: 58px;
                background-image: url(@/assets/login/input-bg.png);
                background-size: 100% 100%;
                margin-bottom: 10px;
                position: relative;

                input {
                    width: 100%;
                    height: 100%;
                    box-sizing: border-box;
                    background-color: transparent;
                    color: #fff;
                    padding-left: 40px;
                }

                img {
                    position: absolute;
                    left: 20px;
                    top: 13px;
                }
            }

            .valid-code {
                width: 250px;
                height: 58px;
                margin-bottom: 10px;
                display: flex;
                align-items: center;

                input {
                    width: 120px;
                    margin-left: 6px;
                    height: 100%;
                    box-sizing: border-box;
                    background-color: transparent;
                    color: #fff;
                    padding-left: 20px;
                    background-image: url(@/assets/login/input-bg.png);
                    background-size: 100% 100%;
                }

                div {
                    width: 130px;
                    height: 38px;
                }
            }

            .login-button {
                width: 232px;
                height: 38px;
                background-image: url(@/assets/login/button-bg.png);
                background-size: 100% 100%;
                margin: 10px 0;

                button {
                    width: 100%;
                    height: 100%;
                    box-sizing: border-box;
                    background-color: transparent;
                    border: 0;
                    color: #fff;
                }

                button:hover {
                    cursor: pointer;
                }
            }

            .login-check {
                width: 232px;
                height: 38px;
                color: #fff;
                font-size: 14px;
                display: flex;
                justify-content: end;
                align-items: center;

                input {
                    margin-right: 10px;
                }

                input:hover,
                label:hover {
                    cursor: pointer;
                }
            }
        }
    }
}
</style>
